<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="login/css/login.css">
    <title>知乎 - 有问题，上知乎</title>
    <link rel="stylesheet" href="login/css/intlTelInput.css">
    <link rel="icon" href="login/img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body onload="load()">

    <div id="test" class="first_Page">
        <div class="login_box">
            <div class="login_box_header">
                <img alt="icon" src="login/img/icon.png" style="margin-left:27px ;margin-top:20px;width:160px;height:75px;" />

            </div>
            <div class="login_box_input">
                <div class="login_input">
                    <h2 style="margin-top: 20px;text-align:center;font-size:20px;color: #0084ff;width: auto;">
                        登陆知乎，发现更多可信赖的解答</h2>
                    <form class="login_input_box">
                        <div class="login_input_box_phone">
                            <input id="loginPhone" class="form-control" type="tel" placeholder="输入用户名" style="border:0;height: 40px;width: 250px;border-color: dimgray">
                        </div>
                        <div class="login_input_box_password">
                            <input id="loginPassword" class="form-control" type="password" placeholder="输入密码" style="float: left; padding-left: 12px; width:250px;border:0;height: 40px">
                            <!--<button class="btn btn-primary" style=" margin-left: 20px;margin-top: 5px ;float: left;">获取验证码-->
                    <!--</button>-->
                        </div>
                        <button type="button" onclick="loginCheck()" class="btn btn-primary" style="width: 250px;height: 35px; margin-left: 60px;margin-top: 40px ;float: left;">
                    登陆
                </button>
                    </form>
                </div>
                <div class="register_input">
                    <from>
                        <h2 style="margin-top: 20px;text-align:center;font-size:20px;color: #0084ff;width: auto;">
                            注册知乎，发现更多可信赖的解答</h2>
                        <form class="input_box" style="margin-top: 50px;margin-left:30px">
                            <div class="register_input_box_phone">
                                <input id="registerPhone" class="form-control" type="tel" placeholder="输入用户名" style="border:0;height: 40px;width: 250px;border-color: dimgray">
                            </div>
                            <span style="font-size: 12px ;color: red;" id="span1"></span>
                            <div class="register_input_box_password">
                                <input id="registerPassword" class="form-control" type="password" placeholder="输入密码" style="float: left; padding-left: 12px; width:250px;border:0;height: 40px">
                                <!--<button class="btn btn-primary" style=" margin-left: 20px;margin-top: 5px ;float: left;">获取验证码-->
                        <!--</button>-->
                            </div>
                            <br><br><div  style="font-size: 12px ;color: red;" id="span2"></div>
                            <button type="button" onclick="registerCheck()" class="btn btn-primary" style="width: 250px;height: 35px; margin-left: 60px;margin-top: 40px ;float: left;">
                       注册
                    </button>
                        </form>
                    </from>
                </div>
                <div class="change">
                    已有账号？<span id="change" style="cursor: pointer;color: #175199"></span>
                </div>
                <div class="downloadZhihu">
                    <button style="background-color: #8590a6;height:42px;width:430px">下载知乎App</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Load jQuery from CDN so can run demo immediately -->
    <!--<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>-->
    <script src="http://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="login/js/intlTelInput.js"></script>
    <script src="login/js/jquery.session.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="./login/js/md5.js"></script>
    <script>
        var change = 0;
        window.onload = function() {
            $("div.register_input").hide();
            $('.change span').text('注册');
        };
        $("#phone").intlTelInput({
            // allowDropdown: false,
            // autoHideDialCode: false,
            // autoPlaceholder: "off",
            // dropdownContainer: "body",
            // excludeCountries: ["us"],
            // formatOnDisplay: false,
            // geoIpLookup: function(callback) {
            //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
            //     var countryCode = (resp && resp.country) ? resp.country : "";
            //     callback(countryCode);
            //   });
            // },
            // initialCountry: "auto",
            // nationalMode: false,
            // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
            // placeholderNumberType: "MOBILE",
            // preferredCountries: ['cn', 'jp'],
            // separateDialCode: true,
            utilsScript: "static/js/utils.js"
        });
        autodivheight();

        function autodivheight() { //函数：获取尺寸
            //获取浏览器窗口高度
            var winHeight = 0;
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            //通过深入Document内部对body进行检测，获取浏览器窗口高度
            if (document.documentElement && document.documentElement.clientHeight)
                winHeight = document.documentElement.clientHeight;
            //DIV高度为浏览器窗口的高度
            document.getElementById("test").style.height = winHeight + "px";

        }
        window.onresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度
        function loginCheck() {
            var phone = document.getElementById("loginPhone").value;
            var password = document.getElementById("loginPassword").value;
            var md5 = $.md5(password);
            var url = "http://localhost:8080/login";
            $.ajax({
                async: true,
                type: "get",
                data: {
                    "username": phone,
                    "password": md5
                },
                url: url,
                dataType: "json",
                success: function(result) {
                    if (result.data == null) {
                        //alert(result.data);
                        // $.session.set(phone,result.data);
                        // $.session.set("phone",phone);
                        $.ajax({
                            async:true,
                            type:"post",
                            url:"http://localhost:8080/getIdByUsername",
                            data:{
                                "username" :phone
                            },
                            success:function (result) {
                                $.cookie('zhihuid', result, {
                                    expires: 10
                                });
                            }
                        })
                        $.cookie('zhihu', phone, {
                            expires: 10
                        });
                        $.cookie('zhihu' + phone, md5, {
                            expires: 10
                        });
                        // $.cookie('zhihu'+phone, result.data,{expires:10});
                        // sessionStorage.setItem(phone,result.data);
                        // sessionStorage.setItem("phone",phone);
                        window.location.href = "http://localhost:8080";
                        alert("登录成功");
                    } else {
                        alert(result.data);

                    }
                },
                error: function(result) {}
            });
        }
        var flag1 = false;
        var flag2 = false;
        $("#registerPhone").blur(function(){
            var name = document.getElementById("registerPhone").value;
            if(name == null || name == ""){
                $("#span1").text("用户名不能为空");
                $("#span1").show();
                flag1 = false;
            }else{
                $("#span1").hide();
                flag1 = true;
            }
        });
        $("#registerPassword").blur(function(){
            var password = document.getElementById("registerPassword").value;
            if(password.length<6){
                $("#span2").text("密码不能小于六位数");
                $("#span2").show();
                flag2 = false;
            }else{
                $("#span2").hide();
                flag2 = true;
            }
        });
        function registerCheck() {
            var username = document.getElementById("registerPhone").value;
            var password1 = document.getElementById("registerPassword").value;
            if(flag1&&flag2){
                register(username,password1);
            }
            // var password = $.md5(password1);
            // $.ajax({
            //     type: "POST",
            //     url: "http://localhost:8080/register",
            //     data: {
            //         "username": username,
            //         "password": password
            //     },
            //     success: function (result) {
            //         if (result.data == null) {
            //             $.cookie('zhihu', username, {
            //                 expires: 10
            //             });
            //             $.cookie('zhihu' + username, password, {
            //                 expires: 10
            //             });
            //             window.location.href = "http://localhost:8080";
            //         } else {
            //             alert(result.data);
            //         }
            //     }
            // })
        }

        function register(username,password){
            // alert(username);
            // alert(password);
            var md5 = $.md5(password);
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/register",
                data: {
                    "username": username,
                    "password": md5
                },
                success: function(result) {
                    if (result.data == null) {
                        $.cookie('zhihu', username, {
                            expires: 10
                        });
                        $.cookie('zhihu' + username, md5, {
                            expires: 10
                        });
                        $.ajax({
                            async:true,
                            type:"post",
                            url:"http://localhost:8080/getIdByUsername",
                            data:{
                                "username" :username
                            },
                            success:function (result) {
                                $.cookie('zhihuid', result, {
                                    expires: 10
                                });
                            }
                        })
                        alert("注册成功！");
                        window.open("http://localhost:8080/")
                    } else {
                        alert(result.data);
                    }
                }
            })

        }

        $(document).ready(function() {
            $("#change").click(function() {
                if (change == 0) {
                    $('.change span').text('登陆');
                    $("div.login_input").hide();
                    $("div.register_input").show();
                    change = 1;
                } else {
                    $('.change span').text('注册');
                    $("div.register_input").hide();
                    $("div.login_input").show();
                    change = 0;
                }

            });
        });
    </script>
</body>

</html>